import xModal from './xModal.js';
import {replaceByObj} from "./xUtil.js";

const tmplUl= '<ul> {{html}}</ul>'
const tmplItem =
    `<li>
         <span type="{{type}}"  class="{{checkClass}}"  data-code="{{dataCode}}">
             {{name}}
          </span>
     </li>`;

export default class xSetColsModal extends xModal{
	
	vCfg;
    vCols = [];

	constructor(cfg) {
        super();
        this.vCfg = cfg;
        this.vCols.push(...cfg.cols);
        this.init();
	};
	
	init(){
	    this.$root.addClass(this.vCfg.style||'set-cols');

	    this.$root.on('click','[type="item"]',this.evItemCheck.bind(this));
        this.$root.on('click','[type="all"]',this.evAllCheck.bind(this));
        this.renderTitle();
        this.render();
        this.verifyCheckAll();
	}

	renderTitle(){
	    this.$title.html(this.renderItem(null,true,-1));
    }

	render(){
	    let html  ='';
	    for(let i =0 ;i<this.vCols.length;i++){
	        if(this.vCols[i].show!=2)
	            html += this.renderItem(this.vCols[i],false,i);
        }
        this.$panel.html(tmplUl.replace('{{html}}',html));
    }

    evItemCheck(e){
	    let index = e.target.getAttribute("data-code")-0;
	    if($(e.target).hasClass('iCheck0')){
            $(e.target).removeClass('iCheck0');
            $(e.target).addClass('iCheck1');
            this.vCols[index].show = 1;
        }else{
            $(e.target).removeClass('iCheck1');
            $(e.target).addClass('iCheck0');
            this.vCols[index].show = 0;
        }
        this.verifyCheckAll();
    };

    evAllCheck(e){
        let $all =  this.$root.find('[type="all"]');
        if($all.hasClass("iCheck0") || $all.hasClass("iCheck2")){
            this.vCols.forEach(col => {
                if(col.show!=2)
                    col.show=1;
            })
        }else{
            this.vCols.forEach(col => {
                if(col.show!=2)
                    col.show=0;
            })
        }
        this.render();
        this.verifyCheckAll();
    };

	verifyCheckAll(){
	    let cnt =0 ;
	    let checkedCnt =0 ;
	    let $all = this.$root.find('[type="all"]');
	    this.vCols.forEach(col => {
	        if (col.show!=2)
	             cnt +=1 ;
	        if(col.show!=2 && (col.show == 1 || col.show == null ) )
                checkedCnt +=1;
	    } );

	    if(checkedCnt==0){
            $all.removeClass("iCheck1");
            $all.removeClass("iCheck2");
            $all.addClass("iCheck0");
        }else{
	        if(cnt == checkedCnt){
                $all.removeClass("iCheck0");
                $all.removeClass("iCheck2");
                $all.addClass("iCheck1");
            }else{
                $all.removeClass("iCheck0");
                $all.removeClass("iCheck1");
                $all.addClass("iCheck2");
            }

        }

    }

    renderItem(item,all,index){
	    if(all){
	        return replaceByObj(tmplItem,{
	            name:'列显示设置',
                dataCode :'-1',
                type:'all',
                checked:'',
                checkClass:''
            })
        }else {
	        return replaceByObj(tmplItem, {
                    name:item.title||'',
                    dataCode : index,
                    type : "item",
                    checked:'',
                    checkClass:item.show==0?'iCheck0':'iCheck1'
                });
        }
    }

    show(){
	    this.$root.fadeIn();
    }

    confirmBefore(e){
	    for(let i= 0;i<this.vCols.length;i++){
	        if(this.vCols.show!=2)
	            this.vCfg.cols[i].show = this.vCols[i].show;
        }

    }

}
